<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!-- th:fragment 定义需要引入的代码块，该div包含的内容即为引用的公共内容 -->
<div th:fragment="product_header">










    <style>
        .header {
            overflow: hidden;
            width: 100%;
        }

        .header-img {
            display: block;
            width: auto;
            max-width: none;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }
    </style>
    <div class="header">
        <img th:src="@{/images/Product/bg-product.jpg}" alt="" class="  header-img">
    </div>
    <p class="clearfix"><br></p>
    <style>
        .navbar a:hover {
            border-bottom: 2px solid var(--fontColor);
        }

        .navbar a {
            line-height: 50px;
            height: 50px;
            padding: 0 25px;
            color: black;
            display: inline-block;
            text-decoration: none;
        }

        .navbar {
            border-bottom: lightgray solid 1px;
            width: 80%;
            margin: auto;
        }

        @media screen and (min-width: 901px) {
            /* 电脑  */
            .navbar a.active {
                border-bottom: 2px solid var(--fontColor);
            }
        }

        @media screen and (max-width: 900px) {
            /* 手机 */
            .navbar a {
                display: block;
                width: 100%;
            }

            .navbar a.active {
                border: 1px solid var(--fontColor);
            }
        }
    </style>
    <div class="navbar">
        <a href="/product/nucleic-acid-pavilion" id="nucleic-acid-pavilion">核酸检测亭</a>
        <a href="/product/police-box" id="police-box">岗亭定制</a>
        <a href="/product/mobile-dining-car" id="mobile-dining-car">移动餐车</a>
        <a href="/product/mobile-toilet" id="mobile-toilet">移动厕所</a>
        <a href="/product/smoking-pavilion" id="smoking-pavilion">吸烟亭</a>
        <a href="/product/sanitation-worker-lounge" id="sanitation-worker-lounge">环卫工人休息室</a>
    </div>











</div>
</html>






